<template>
  <div>
    <HeadTop title="修改用户信息"></HeadTop>
    <div class="main">
      <div class="add_form">
        <van-field name="uploader" label="文件上传">
          <template #input>
            <van-uploader
              v-model="uploader"
              :after-read="onRead"
              :max-count="1"
            />
          </template>
        </van-field>
        <van-field v-model="user.username" label="用户名" disabled />
        <van-field v-model="user.nick" label="昵称" placeholder="请输入昵称" />
        <van-field v-model="user.wx" label="微信" placeholder="请输入微信号" />
        <van-field
          label="城市"
          placeholder="请选择地址"
          :value="user.address"
          @click-input="show = true"
        />
        <van-button type="danger" @click="changeuser">确定修改</van-button>
      </div>
    </div>
    <!-- 三级联动 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '45%' }">
      <van-area
        title="请选择省/市/区"
        :area-list="areaList"
        @confirm="choseAddress"
        @cancel="show = false"
      />
    </van-popup>
    <!-- 三级联动 -->
  </div>
</template>

<script>
import HeadTop from '../../components/headtop.vue'
import { areaList } from '@vant/area-data'
import { getusermsg, changeuser, changeheadimg } from '_api'
import { getToken } from '_utils/token.js'
import { Toast } from 'vant'
export default {
  components: { HeadTop },
  data () {
    return {
      user: {
        wx: '',
        nick: '',
        city: '',
        province: '',
        username: '',
        avatarUrl: '',
        address: ''
      },
      uploader: [],
      show: false,
      areaList
    }
  },
  created () {
    this.getusermsg()
  },
  methods: {
    getusermsg () {
      getusermsg({
        token: getToken()
      }).then((res) => {
        console.log(res)
        const oldimg = {}
        this.uploader.push(oldimg)
        this.user.wx = res.data.data.base.wx
        this.user.username = res.data.data.base.username
        this.user.nick = res.data.data.base.nick
        this.user.avatarUrl = res.data.data.base.avatarUrl
        this.uploader[0].url = this.user.avatarUrl
        this.user.address = res.data.data.base.province + ' ' + res.data.data.base.city
      })
    },
    changeuser () {
      changeuser({
        token: getToken(),
        ...this.user
      }).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          Toast.success({
            message: '修改成功',
            duration: 1500,
            onClose: () => {
              this.$router.replace('/user')
            }
          })
        }
      })
    },
    choseAddress (msg) {
      console.log(msg)
      const addressStr = []
      msg.forEach((item) => {
        addressStr.push(item.name)
      })
      this.user.address = addressStr.join('  ')
      this.user.province = msg[0].name
      this.user.city = msg[1].name
      this.show = false
    },
    onRead (file) {
      // file文件如下图
      const token = getToken()
      console.log(token)
      const formData1 = new FormData() // 构造一个 FormData，把后台需要发送的参数添加
      formData1.append('upfile', file.file)
      formData1.append('token', token)// 接口需要传的参数
      changeheadimg(formData1).then((res) => {
        console.log(res)
        this.user.avatarUrl = res.data.data.url
        console.log(this.user.avatarUrl)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.add_form {
  padding-top: 0.9rem;
}
/deep/ .van-field--disabled .van-field__label {
  color: #646566;
}
.van-cell {
  border-bottom: 1px solid #d2d3d3;
}
/deep/ .van-button--normal {
  margin-top: 0.3rem !important;
  width: 95%;
  display: block;
  margin: 0 auto;
}
.avatar-uploader .el-upload {
  border: 0.01rem dashed #d9d9d9;
  border-radius: 0.06rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 0.28rem;
  color: #8c939d;
  width: 1.78rem;
  height: 1.78rem;
  line-height: 1.78rem;
  text-align: center;
}
.avatar {
  width: 1.78rem;
  height: 1.78rem;
  display: block;
}
</style>
